<template>
<div class="tab">
  <van-tabs v-model="activeName" stiky
            color="#30A1E9" line-width="2rem" line-height=".05rem"
            title-active-color="#30A1E9">
    <van-tab title="我的待办" name="我的待办" :badge=todoList.length >
      <van-search v-model="value" placeholder="请输入标题" @input="todoSearch"/>
      <van-pull-refresh
          v-model="isLoading"
          success-text="刷新成功"
          @refresh="onRefresh"
      >
        <single-history-item class="historyList" :dot="false" :list="todoList"
        :search-value="searchValue"></single-history-item>
      </van-pull-refresh>

    </van-tab>
    <van-tab title="我的已办" name="我的已办">
      <van-search v-model="value" placeholder="请输入标题" @input="doneSearch"/>
      <van-pull-refresh
          v-model="isLoading"
          success-text="刷新成功"
          @refresh="onRefresh"
      >
        <single-history-item class="historyList" :dot="false" :list="doneList"
        :search-value="doneSearchValue"></single-history-item>
      </van-pull-refresh>
    </van-tab>
  </van-tabs>
</div>
</template>

<script>
import {todoListHistoryList} from "../../data/todoList";
import Vue from 'vue';
import { Tab, Tabs,Search } from 'vant';
import SingleHistoryItem from "../toDoList/singleHistoryItem";
import { PullRefresh } from 'vant';

Vue.use(PullRefresh);
Vue.use(Search);
Vue.use(Tab);
Vue.use(Tabs);
export default {
name: "tab",
  components: {SingleHistoryItem},
  data() {
    return {
      activeName: '我的待办',
      value: '',
      todoList:[],
      doneList:[],
      count: 0,
      isLoading: false,
      searchValue:"",
      doneSearchValue:""
    };
  },
  methods:{
    onRefresh() {
      setTimeout(() => {
        // Toast('刷新成功');
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
    todoSearch(value){
      this.searchValue=value;
    },
    doneSearch(value){
      this.doneSearchValue=value;
    },
  },
  created() {
    let doneInit=[];
    doneInit.push(todoListHistoryList.filter(function (n){
      return n.done===true;
    }))
    this.doneList.push(...doneInit[0])

    let todoInit=[];
    todoInit.push(todoListHistoryList.filter(function (n){
      return n.done===false;
    }))
    this.todoList.push(...todoInit[0])
  }
}
</script>

<style lang="less" scoped>
.historyList{
  margin-left: 1rem;
  height: 80vh;
}
</style>